<template>
  <div class="container">

    <!--头部操作-->
    <div class="header-box">
      <div class="left">
        <el-button type="primary" size="small" icon="el-icon-arrow-left" plain @click="goBack">返回</el-button>
      </div>
      <div class="right">
        <el-button type="success" size="small" @click="handleSubmitClick" :disabled="editable">提交</el-button>
      </div>
    </div>
    <!--头部操作-->

    <!--基本信息-->
    <card title="基本信息">
      <div class="context-warp" style="overflow: unset;">
        <div class="page-form-item" style="width: 33.33%;">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>片区</span>
          </label>
          <div class="page-form-item-content" style="position: relative;z-index: 1;height: auto;line-height: 36px;overflow: unset;">
            <tree-select v-model="baseData.deptId" size="small" :options="deptOptions" :show-count="true" placeholder="请选择片区" @select="handleAreaChange" style="position: absolute;width:96%;left: 2%;top: 7px;z-index: 100;"/>
          </div>
        </div>

        <div class="page-form-item" style="width:33.33%">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>二次设计组长</span>
          </label>
          <div class="page-form-item-content">
            <zb-form-select-data v-bind="option" v-model="baseData.projectName" :disabled="editable"></zb-form-select-data>
          </div>
        </div>

        <div class="page-form-item" style="width:33.33%">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"><i class="icon" style="margin-right: 4px;">*</i>片区预结算组长</span>
          </label>
          <div class="page-form-item-content">
            <zb-form-select-data v-bind="option" v-model="baseData.projectName" :disabled="editable"></zb-form-select-data>
          </div>
        </div>

        <div class="page-form-item" style="width:33.33%;border-bottom: 1px solid #ebeef3;">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">提交人</span>
          </label>
          <div class="page-form-item-content">
            <el-input v-model.trim="baseData.createName" disabled></el-input>
          </div>
        </div>

        <div class="page-form-item" style="width:33.33%;border-bottom: 1px solid #ebeef3;">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text">提交时间</span>
          </label>
          <div class="page-form-item-content">
            <el-date-picker v-model="baseData.createTime" type="date" disabled placeholder="选择日期"></el-date-picker>
          </div>
        </div>


        <div class="page-form-item" style="width:33.33%;border-bottom: 1px solid #ebeef3;">
          <label class="page-form-item-label">
            <span class="page-form-item-label__text"></span>
          </label>
          <div class="page-form-item-content">
          </div>
        </div>


      </div>
    </card>
    <!--基本信息-->
  </div>
</template>

<script>
  import { getDetailInfoApi, addAndUpdateApi } from '@/api/system/userDistribute'
  import {getTreeselect} from "@/api/projectManagement/initiation";
  import card from "@/components/Card/index";
  import {getCurrentDate} from "@/utils/dateUtils";
  import {newWindowBpm} from "@/utils/openBpm";
  import Index from "./index";
  import {getToken} from "@/utils/auth";
  import TreeSelect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "userDistributeDetail",
    components: { card, TreeSelect},
    data() {
      return {
        editable: false,//是否可编辑
        option: {
          label: "人员名称",
          prop: "projectName",
          type: "selectData",
          searchKey: "projectName",
          span: 8,
          url: `${process.env.VUE_APP_BASE_API}/pigfarm-project/like`,
          props: {
            label: "projectName",
            value: "projectId"
          },
          createdRequest: false,
          searchIconVisible: true,
          filterAble: true,
          selectAble: true,
          getDictSuccessStatus: 0,
          getDictResultMap: {
            status: 'data.code',
            data: 'data.data',
            list: 'data.data.records',
            total: 'data.data.total',
          },
          dialogType: 2,
          labelFields: ['pigfarmName', 'pigfarmNumber', 'projectName', 'projectNumber'],
          labelFieldsName: ['猪场名称', '猪场编号', '项目名称', '项目编号'],
          searchLabel: ['projectName'],
          searchLabelName: ['人员名称'],
          headers: {
            Authorization: 'Bearer ' + getToken()
          },
          listeners: {
            dataChange: val => {
              if (val) {
                const {projectId, projectName, projectNumber} = val;
                //debugger
                this.baseData.projectId = projectId;
                this.baseData.projectName = projectName;
                this.baseData.projectNumber = projectNumber;
              }
            }
          }
        },
        deptOptions: undefined,//片区配置
        baseData: {
          deptId:null,
          createName: '',
          createTime: getCurrentDate(),
        },
      }
    },

    created() {
      const {type, id} = this.$route.query;
      this.editable = type === 'view';
      if (id) {
        this.getDetailInfo(id);
      }
      if (type === "add") {
        setTimeout(() => {
          this.$set(this.baseData, "createName", this.$store.getters.name);
        }, 50);
      }
      this.getTreeSelectData();
    },

    activated(){
      if (
        (this.$route.query.type && this.$route.query.type!=='add')
        || this.$route.query.id
      ){
        this.$store.dispatch('tagsView/delCachedView', this.$route)
      }
    },
    methods: {

      /**
       * 获取片区树形结构
       */
      getTreeSelectData() {
        getTreeselect().then(res => {
            if (res && res.code === 0) {
              this.deptOptions = res.data;
            } else {
              this.msgError(res.msg)
            }
            this.loading = false;
          }
        )
      },


      /**
       * 获取详情
       */
      getDetailInfo(id) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getDetailInfoApi(id).then(res => {
          console.log('详情:', res);
          loading.close();
          if (res.code === 0) {
            this.baseData = res.data;
            let { status } = res.data;
            if (this.$route.query.type === "view") {
              this.editable = true;
            } else {
              //设置编辑状态(暂存 || 退回、驳回 ||作废状态可编辑)
              if (!status || status === 'save' || status === 'reject' || status === 'cancel') {
                this.editable = false;
              } else {
                this.editable = true;
              }
            }
          } else {
            this.$message.warning(res.msg);
          }
        }).catch(error => {
          console.log('error:', error);
          loading.close();
        })
      },


      /**
       * 片区选择事件
       */
      handleAreaChange(e) {
        this.baseData.deptId = e.id;
      },

      /**
       * 数据校验
       */
      checkData() {
        const {projectName, contractTitle} = this.baseData;
        //debugger
        if (!projectName) {
          this.$message.warning("请选择项目!");
          return false;
        } else if (!contractTitle) {
          this.$message.warning("请选择合同!");
          return false;
        }
      },


      /**
       *返回
       */
      goBack() {
        this.$router.push({
          path: '/systemManager/userDistribute/index'
        });
      },


      /**
       * 提交
       */
      handleSubmitClick() {
        const status = this.checkData();
        if (status) {
          const {type} = this.$route.query;
          console.log('baseData:', this.baseData);
          //去除提交人和提交时间(接口不需要)
          delete this.baseData.createTime;
          delete this.baseData.createName;
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          addAndUpdateApi(type, this.baseData).then(res => {
            console.log('新增:', res);
            loading.close();
            if (res.code === 0) {
              this.$message.success("提交成功");
              newWindowBpm(res.data, true, {path: `/userDistribute/index`}, true, Index);
            } else {
              this.$message.warning(res.msg);
            }
          }).catch(error => {
            console.log('error:', error);
            loading.close();
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/form"; //table样式
  .container {
    .header-box {
      display: flex;
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 20px;
      box-sizing: border-box;

      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 20%;
      }

      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 80%;
      }
    }

    .tool-box {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 5px;
    }
  }
</style>
